import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => 
        <Fragment key={item.id}>
          <dt>{ item.term }</dt>
          <dd>{ item.description }</dd>
        </Fragment>
      )}
    </dl>
  )
}

const items = [
  { id: 1, term: 1, description: 'hello' },
  { id: 2, term: 2, description: 'nihao' }
]

ReactDOM.render(
  <Glossary items={ items }/>,
  document.getElementById('root')
)